<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="admin/common/adminHeader::html(title='编辑文章')">
<body>
<!--引入公共头部-->
<div th:replace="~{admin/common/common :: #top_}"></div>
<!--<div th:replace="dashboard :: top_"></div>-->
<div id="vue" class="container-fluid">
    <div class="row">
        <!--引入公共左边树-->
        <div th:replace="~{admin/common/common :: menu_(actUri='emps')}"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">标题</label>
                <div class="col-sm-10">
                    <input id="title" class="form-control" name="title" type="text"
                           :value="bean.title"  v-model="bean.title"
                           placeholder="标题">
                </div>
            </div>
            <div class="form-group row">
                <label for="content" class="col-sm-2 col-form-label">文章内容</label>
                <div class="col-sm-10">
                    <textarea style="height: 200px" cols="200" id="content" class="form-control"  name="content"  type="textarea"
                           v-model="bean.content" :value="bean.content"
                              placeholder="文章内容"></textarea>
                </div>
            </div>
            <div class="form-group row">
                <label for="is_top" class="col-sm-2 col-form-label">是否置顶</label>
                <div class="col-sm-10">
                    <input id="is_top" class="is_top" name="is_top" type="checkbox" value="bean.is_top" v-model="bean.is_top">
                </div>
            </div>

            <div class="form-group row">
                <div class="col-sm-10">
                    <button @click="submit" type="submit" class="btn btn-primary">{{type == 'edit' ? '修改' : '保存'}}</button>
                </div>
            </div>
        </main>
    </div>
</div>
</body>
<div th:include="admin/common/adminFooter::html"></div>

<script>
    $(function () {
        var data4Vue = {
            uri:'../../../articles/',
            bean: {id:0,uid:1,title:'',content:'',is_top:0,gmt_create:'',gmt_modified:''},
            type:'',
        };
        Vue.filter('time', function (time) {
            var date = new Date(time);
            return Str=date.getFullYear() + '-' +
                (date.getMonth() + 1) + '-' +
                date.getDate() + ' ' +
                date.getHours() + ':' +
                date.getMinutes() + ':' +
                date.getSeconds();
        });
        var vue = new Vue({
            el: "#vue",
            data: data4Vue,
            mounted: function () {
                var param = window.location.pathname.split('/');
                var length = param.length;
                if(param[length-2] === "edit"){
                    this.type = "edit";
                    this.get(param[length-1])
                } else if(param[length-1] === "add"){
                    this.type = "add";
                }
            },
            methods:{
                get:function (id) {
                    var url = this.uri + id;
                    axios.get(url).then(function(response) {
                        vue.bean=response.data.bean;
                    });
                },
                submit: function () {
                    if(this.type === "edit"){
                        if(vue.bean.is_top){
                            vue.bean.is_top=1;
                        }
                        else{
                            vue.bean.is_top=0;
                        }
                        axios.put(this.uri,this.bean).then(function(response) {
                            location.reload();
                        });
                    } else if(this.type === "add"){
                        if(this.bean.content&&this.bean.title){
                            axios.post("../../articles/",this.bean).then(function(response) {
                                alert("添加成功");
                                location.reload();
                            });
                        }else{
                            alert("不能有空项");
                        }
                    }
                }
            }
        });
    })
</script>
</html>